<template>
  <div>
    <div class="container">
      <!-- <el-row :gutter="20">
        <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
          <el-card>
            <div slot="header">
              用户总数
            </div>
            <div class="text">{{ user }}人</div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
          <el-card>
            <div slot="header">
              文章总数
            </div>
            <div class="text">{{ article }}个</div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
          <el-card>
            <div slot="header">
              评论总数
            </div>
            <div class="text">{{ comment }}个</div>
          </el-card>
        </el-col>
      </el-row>
      <div class="website">
        <span>项目技术</span>
        <el-tabs :tab-position="tabPosition" style="height: 200px;">
          <el-tab-pane label="Vue">
            <span>
              Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue
              采用自底向上增量开发的设计。Vue
              的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue
              完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
              <br />
              Vue (读音 /vjuː/，类似于 view)
              是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue
              被设计为可以自底向上逐层应用。Vue
              的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue
              也完全能够为复杂的单页应用提供驱动。
            </span>
            <a href="https://cn.vuejs.org/" target="_blank">
              <el-button type="primary">详情请戳我👇</el-button>
            </a>
          </el-tab-pane>
          <el-tab-pane label="Spring Boot">
            <span>
              SpringBoot是由Pivotal团队在2013年开始研发、2014年4月发布第一个版本的全新开源的轻量级框架。它基于Spring4.0设计，不仅继承了Spring框架原有的优秀特性，而且还通过简化配置来进一步简化了Spring应用的整个搭建和开发过程。另外SpringBoot通过集成大量的框架使得依赖包的版本冲突，以及引用的不稳定性等问题得到了很好的解决。
            </span>
            <a href="https://spring.io/projects/spring-boot/" target="_blank">
              <el-button type="primary">详情请戳我👇</el-button>
            </a>
          </el-tab-pane>
          <el-tab-pane label="MyBatis-Plus">
            MyBatis-Plus（简称 MP）是一个 MyBatis 的增强工具，在 MyBatis
            的基础上只做增强不做改变，为简化开发、提高效率而生 特性
            无侵入：只做增强不做改变，引入它不会对现有工程产生影响，如丝般顺滑
            损耗小：启动即会自动注入基本 CURD，性能基本无损耗，直接面向对象操作
            强大的 CRUD 操作：内置通用 Mapper、通用
            Service，仅仅通过少量配置即可实现单表大部分 CRUD
            操作，更有强大的条件构造器，满足各类使用需求 支持 Lambda
            形式调用：通过 Lambda
            表达式，方便的编写各类查询条件，无需再担心字段写错
            支持主键自动生成：支持多达 4 种主键策略（内含分布式唯一 ID 生成器 -
            Sequence），可自由配置，完美解决主键问题 支持 ActiveRecord
            模式：支持 ActiveRecord 形式调用，实体类只需继承 Model
            类即可进行强大的 CRUD 操作
            <a href="https://baomidou.com/guide/" target="_blank">
              <el-button type="primary">详情请戳我👇</el-button>
            </a>
          </el-tab-pane>
          <el-tab-pane label="Electron">
            Node. js 的所有 内置模块 都在Electron中可用， 第三方 node
            模块中也完全支持 (包括 原生模块 )。 Electron
            还为开发原生桌面应用程序提供了一些额外的内置模块。
            某些模块仅在主进程中可用, 有些仅在渲染进程 (web 页) 中可用,
            而有些在这两个进程中都可以使用。
            <a href="https://www.electronjs.org/" target="_blank">
              <el-button type="primary">详情请戳我👇</el-button>
            </a>
          </el-tab-pane>
        </el-tabs>
      </div>-->
      <el-row :gutter="20">
        <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
          <el-card shadow="never">
            <div slot="header">
              <span>新增评论量：</span>
            </div>
            <vab-chart
              :autoresize="true"
              theme="vab-echarts-theme"
              :options="fwl"
            />
            <div class="bottom">
              <span>
                日均新增评论数:
                <vab-count
                  :start-val="config1.startVal"
                  :end-val="config1.endVal"
                  :duration="config1.duration"
                  :separator="config1.separator"
                  :prefix="config1.prefix"
                  :suffix="config1.suffix"
                  :decimals="config1.decimals"
                />
              </span>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="16" :xl="16">
          <el-card shadow="never">
            <div slot="header">
              <span>文章评论数top5</span>
            </div>
            <vab-chart
              :autoresize="true"
              theme="vab-echarts-theme"
              :options="sqs"
            />
            <div class="bottom">
              <span>
                平均评论数:
                <vab-count
                  :start-val="config2.startVal"
                  :end-val="config2.endVal"
                  :duration="config2.duration"
                  :separator="config2.separator"
                  :prefix="config2.prefix"
                  :suffix="config2.suffix"
                  :decimals="config2.decimals"
                />
              </span>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-card shadow="never">
            <div slot="header">
              <span>文章访问量top5</span>
            </div>
            <vab-chart
              :autoresize="true"
              theme="vab-echarts-theme"
              :options="hit"
            />
            <div class="bottom">
              <span>
                平均访问量:
                <vab-count
                  :start-val="config3.startVal"
                  :end-val="config3.endVal"
                  :duration="config3.duration"
                  :separator="config3.separator"
                  :prefix="config3.prefix"
                  :suffix="config3.suffix"
                  :decimals="config3.decimals"
                />
              </span>
            </div>
          </el-card>
        </el-col>
        <el-col
          v-if="this.$store.state.user.permissions[0] == 'admin'"
          :xs="24"
          :sm="24"
          :md="24"
          :lg="24"
          :xl="12"
        >
          <el-card shadow="never">
            <div slot="header">
              <span>新增用户：</span>
            </div>
            <vab-chart
              :autoresize="true"
              theme="vab-echarts-theme"
              :options="user1"
            />
            <div class="bottom">
              <span>
                日均访问量:
                <vab-count
                  :start-val="config4.startVal"
                  :end-val="config4.endVal"
                  :duration="config4.duration"
                  :separator="config4.separator"
                  :prefix="config4.prefix"
                  :suffix="config4.suffix"
                  :decimals="config4.decimals"
                />
              </span>
            </div>
          </el-card>
        </el-col>
        <el-col
          v-if="this.$store.state.user.permissions[0] == 'admin'"
          :xs="24"
          :sm="24"
          :md="24"
          :lg="24"
          :xl="12"
        >
          <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
              <el-card style="height: 264px">
                <div slot="header">用户总数</div>
                <div class="text">
                  <span>
                    <vab-count
                      :start-val="config1.startVal"
                      :end-val="usernum"
                      :duration="config1.duration"
                      :separator="config1.separator"
                      :prefix="config1.prefix"
                      :suffix="config1.suffix"
                      :decimals="config1.decimals"
                    />
                  </span>
                  人
                </div>
              </el-card>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
              <el-card style="height: 264px">
                <div slot="header">文章总数</div>
                <div class="text">
                  <vab-count
                    :start-val="config1.startVal"
                    :end-val="article"
                    :duration="config1.duration"
                    :separator="config1.separator"
                    :prefix="config1.prefix"
                    :suffix="config1.suffix"
                    :decimals="config1.decimals"
                  />
                  个
                </div>
              </el-card>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
              <el-card style="height: 264px">
                <div slot="header">评论总数</div>
                <div class="text">
                  <vab-count
                    :start-val="config1.startVal"
                    :end-val="comment"
                    :duration="config1.duration"
                    :separator="config1.separator"
                    :prefix="config1.prefix"
                    :suffix="config1.suffix"
                    :decimals="config1.decimals"
                  />
                  个
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
  import VabChart from "@/plugins/echarts";
  import { getMain } from "@/api/article";
  export default {
    components: {
      VabChart,
    },
    props: [],
    data() {
      return {
        timer1: 0,
        timer2: 0,
        usernum: 0,
        article: 0,
        comment: 0,
        tabPosition: "left",
        config1: {
          startVal: 0,
          endVal: 0, //
          decimals: 0,
          prefix: "",
          suffix: "",
          separator: ",",
          duration: 8000,
        },
        config2: {
          startVal: 0,
          endVal: 0, //
          decimals: 0,
          prefix: "",
          suffix: "",
          separator: ",",
          duration: 8000,
        },
        config3: {
          startVal: 0,
          endVal: 0, //
          decimals: 0,
          prefix: "",
          suffix: "",
          separator: ",",
          duration: 8000,
        },
        config4: {
          startVal: 0,
          endVal: 0, //
          decimals: 0,
          prefix: "",
          suffix: "",
          separator: ",",
          duration: 8000,
        },
        fwl: {
          grid: {
            top: "4%",
            left: "2%",
            right: "4%",
            bottom: "0%",
            containLabel: true,
          },
          xAxis: [
            {
              type: "category",
              boundaryGap: false,
              data: [],
              axisTick: {
                alignWithLabel: true,
              },
            },
          ],
          yAxis: [
            {
              type: "value",
            },
          ],
          series: [
            {
              name: "评论量",
              type: "line",
              data: [], //
              smooth: true,
              areaStyle: {},
            },
          ],
        },
        sqs: {
          grid: {
            top: "%",
            left: "2%",
            right: "4%",
            bottom: "0%",
            containLabel: true,
          },
          xAxis: [
            {
              type: "category",
              data: [],
              axisTick: {
                alignWithLabel: true,
              },
            },
          ],
          yAxis: [
            {
              type: "value",
            },
          ],
          series: [
            {
              name: "授权数",
              type: "bar",
              barWidth: "20%",
              data: [], //数据
            },
          ],
        },
        hit: {
          grid: {
            top: "%",
            left: "2%",
            right: "4%",
            bottom: "0%",
            containLabel: true,
          },
          xAxis: [
            {
              type: "category",
              data: [],
              axisTick: {
                alignWithLabel: true,
              },
            },
          ],
          yAxis: [
            {
              type: "value",
            },
          ],
          series: [
            {
              name: "授权数",
              type: "bar",
              barWidth: "20%",
              data: [], //数据
            },
          ],
        },
        user1: {
          grid: {
            top: "4%",
            left: "2%",
            right: "4%",
            bottom: "0%",
            containLabel: true,
          },
          xAxis: [
            {
              type: "category",
              boundaryGap: false,
              data: [],
              axisTick: {
                alignWithLabel: true,
              },
            },
          ],
          yAxis: [
            {
              type: "value",
            },
          ],
          series: [
            {
              name: "用户xin",
              type: "line",
              data: [],
              smooth: true,
              areaStyle: {},
            },
          ],
        },
      };
    },
    computed: {},
    watch: {},
    created() {
      console.log(this.$store.state.user.permissions[0]);
      this.$baseColorfullLoading(1, "正在加载", (loading) => {
        loading.close();
        getMain().then((res) => {
          console.log(res.data);
          this.getCommen(res.data);
          this.getcommentsTop5(res.data);
          let article1 = [];
          let num2 = [];
          let hitsTop5 = res.data.hitsTop5;
          if (res.data.newUser) {
            let user = [];
            let num3 = [];
            let count = 0;
            let newUser = res.data.newUser;
            for (let i in newUser) {
              user.push(i);
              num3.push(newUser[i]);
              count += newUser[i];
            }
            this.config4.endVal = count / user.length;
            this.user1.xAxis[0].data = user;
            this.user1.series[0].data = num3;
            this.usernum = res.data.user;
            this.article = res.data.article;
            this.comment = res.data.comment;
          }
          let count = 0;
          for (let i of hitsTop5) {
            article1.push(i.title);
            num2.push(i.hits);
            count += i.hits;
          }
          this.config3.endVal = count / article1.length;
          this.hit.xAxis[0].data = article1;
          this.hit.series[0].data = num2;
          let flag = 0;
        });
      });
    },
    mounted() {},
    methods: {
      async getCommen(data) {
        let date = [];
        let num = [];
        let count = 0;
        let newComment = data.newComment;
        for (let i in newComment) {
          date.push(i);
          num.push(newComment[i]);
          count += newComment[i];
        }
        this.config1.endVal = count / date.length;
        let flag = 0;
        this.timer1 = setInterval(() => {
          if (flag >= date.length) flag = 0;
          this.fwl.xAxis[0].data = date.slice(flag, flag + 3);
          this.fwl.series[0].data = num.slice(flag, flag + 3);
          flag += 3;
        }, 3000);
      },
      async getcommentsTop5(data) {
        let article = [];
        let num1 = [];
        let count = 0;
        let commentsTop5 = data.commentsTop5;
        for (let i of commentsTop5) {
          article.push(i.title);
          num1.push(i.comments_num);
          count += i.comments_num;
        }
        this.config2.endVal = count / article.length;
        let flag = 0;
        this.timer2 = setInterval(() => {
          if (flag >= article.length) flag = 0;
          this.sqs.xAxis[0].data = article.slice(flag, flag + 3);
          this.sqs.series[0].data = num1.slice(flag, flag + 3);
          console.log();
          flag += 3;
        }, 3000);
      },
    },
  };
</script>
<style lang="scss" scoped>
  .container {
    padding: 0 !important;
    margin: 0 !important;
    background: #f5f7f8 !important;

    ::v-deep {
      .el-alert {
        padding: $base-padding;

        &--info.is-light {
          min-height: 82px;
          padding: $base-padding;
          margin-bottom: 15px;
          color: #909399;
          background-color: $base-color-white;
          border: 1px solid #ebeef5;
        }
      }

      .el-card__body {
        .echarts {
          width: 100%;
          height: 125px;
        }
      }
    }

    .card {
      min-height: 400px;

      ::v-deep {
        .el-card__body {
          .echarts {
            width: 100%;
            height: 305px;
          }
        }
      }
    }

    .bottom {
      padding-top: 20px;
      margin-top: 5px;
      color: #595959;
      text-align: left;
      border-top: 1px solid $base-border-color;
    }

    .table {
      width: 100%;
      color: #666;
      border-collapse: collapse;
      background-color: #fff;

      td {
        position: relative;
        min-height: 20px;
        padding: 9px 15px;
        font-size: 14px;
        line-height: 20px;
        border: 1px solid #e6e6e6;

        &:nth-child(odd) {
          width: 20%;
          text-align: right;
          background-color: #f7f7f7;
        }
      }
    }

    .icon-panel {
      height: 100px;
      text-align: center;
      cursor: pointer;

      svg {
        font-size: 40px;
      }

      p {
        margin-top: 10px;
      }
    }

    .bottom-btn {
      button {
        margin: 5px 10px 15px 0;
      }
    }
  }
  .text {
    font-size: 50px;
    text-align: center;
    line-height: 120px;
  }
</style>
